<template>
  <Mapbox :mapOnLoadCB="mapOnLoadCB"></Mapbox>

  <div class="map-demo-wrap animated" :class="{'fold':!menuStatusRef,'bounceInLeft':menuStatusRef}">
    <p class="title">mapbox demo</p>
    <ul class="menu-list">
      <el-scrollbar>
        <li class="menu ellipsis" :title="menu.name"
            v-for="(menu,index) in mapDemoListRef" :key="menu.id" @click="toggleMapDemo(menu)">
          {{ index < 9 ? `0${index + 1}` : index + 1 }}、{{ menu.name }}
        </li>
      </el-scrollbar>
    </ul>
    <span class="collapse" @click="menuStatusRef=!menuStatusRef">
      <i class="fa"
         :class="{'fa-angle-double-left':menuStatusRef,'fa-angle-double-right':!menuStatusRef}"></i>
      {{ menuStatusRef ? "收起" : "展开" }}
    </span>
  </div>
</template>

<script>
import {ref} from "vue"
import Mapbox from "@/components/common/Mapbox.component.vue"
import useMapDemo from "@/hooks/useMapDemo"

export default {
  name: "Home",
  components: {
    Mapbox
  },

  setup(props, {attrs, slots, emit}) {
    const {menuStatusRef, mapDemoListRef, toggleMapDemo} = useMapDemo()

    // map对象
    let mapStore = ref({});
    let mapOnLoadCB = (map) => {
      mapStore.value = map;
    };

    return {
      menuStatusRef,
      mapDemoListRef,
      toggleMapDemo,
      mapOnLoadCB
    }
  }
}
</script>

<style scoped lang="scss">
.map-demo-wrap {
  position: absolute;
  left: 5px;
  top: 5px;
  background: #fff;
  width: 300px;
  height: calc(100% - 30px);
  text-align: left;
  padding: 10px;
  border-radius: 5px 0 5px 5px;
  transition: all ease 0.5s;

  &.fold {
    left: -320px
  }

  .title {
    font-size: $font-lg;
    font-weight: bold;
    background-color: cadetblue;
    color: #fff;
    padding: 10px;
    border-radius: 5px;
  }

  .menu-list {
    width: 100%;
    height: calc(100% - 40px);
    overflow: auto;

    .menu {
      list-style: none;
      line-height: 24px;
      cursor: pointer;
      padding: 5px;
      border-radius: 5px;

      &:hover {
        background-color: darkcyan;
        color: #ffffff
      }
    }
  }

  .collapse {
    position: absolute;
    right: -55px;
    top: 0;
    background-color: #fff;
    padding: 5px 10px;
    border-radius: 0 10px 10px 0;
    font-size: 12px;
    cursor: pointer;

    i {
      margin-right: 5px
    }
  }
}
</style>